﻿@using LunchPicker.Domain.DataTransferObject
@model dynamic

@{
    ViewBag.Title = "Restaurant Ranking";
}

<div style="width: 98%; margin: 1%;">

    <script type="text/x-kendo-tmpl" id="RestaurantItem">
        <p>
            <div class="listing">
                <span class="rating">${Rating}</span> 
                <span class="restaurant"><a href='@Url.Action("Restaurant", "Home") + ?id=${RestaurantId}'>${Name}</a></span>
            </div>
        </p>    
    </script>
    
    <div style="width:98%; margin:1%;">
        @(Html.Kendo()
            .ListView<RestaurantListingDto>()
            .Name("Restaurants")
            .TagName("div")
            .HtmlAttributes(new {@class = "list"})
            .ClientTemplateId("RestaurantItem")
            .DataSource(data => data.Read(read => read.Action("GetResturantRanking", "Home")))
              )
    </div>
</div>

@section Head
{
    <style type="text/css">
        .list
        {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
            border: none;
        }

        .listing
        {
            height: 30px;
            border-bottom: solid 1px #666666;
            width: 100%;
            text-align: left;
            vertical-align: middle;
        }

        .rating
        {
            border: solid 2px #5EB2D4;
            padding: 5px;
            font-weight: bold;
            color: #293955;
            width: 10px;
        }

        .restaurant,
        .restaurant a
        {
            text-decoration: none;
            font-weight: bold;
            color: #293955;
        }
    </style>
}
